<template>
  <div class="i-table-no-border">
    <div>
      <table-btns
        :tableTopOperateData="listData.tableTopOperate"
        :tableTopBatchOperate="listData.tableTopBatchOperate"
        :selectedData="selectedData"
        :requestApi="listData.requestApi"
        :basePath="basePath"
        @exportData="exportData"
        @actionsChange="getData"
      >
      </table-btns>
    </div>
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      max-height="450"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      class="ivu-mt"
      stripe
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <template slot-scope="{ row }" slot="compareArea">
        <span>{{ row.old.compareArea }}</span>
      </template>
      <template slot-scope="{ row }" slot="compareType">
        <span v-if="row.old && row.old.compareType == '1'">一品多供</span>
        <span v-if="row.old && row.old.compareType == '2'">竞争对手</span>
        <span v-if="row.old && row.old.compareType == '3'">同品类供应商</span>
        <span v-if="row.old && row.old.compareType == '4'">同品牌供应商</span>
      </template>
      <template slot-scope="{ row }" slot="compareTypeUpdate">
        <span v-if="row.compareTypeUpdate == '1'">一品多供</span>
        <span v-if="row.compareTypeUpdate == '2'">竞争对手</span>
        <span v-if="row.compareTypeUpdate == '3'">同品类供应商</span>
        <span v-if="row.compareTypeUpdate == '4'">同品牌供应商</span>
      </template>
      <template slot-scope="{ row }" slot="compareTarget">
        <span>{{ row.old ? row.old.compareTarget : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="compareMan">
        <span>{{ row.old ? row.old.compareMan : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="compareTel">
        <span>{{ row.old ? row.old.compareTel : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="compareAddress">
        <span>{{ row.old ? row.old.compareAddress : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="brandDiff">
        <span>{{ row.old ? row.old.brandDiff : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="compareRule">
        <span>{{ row.old ? row.old.compareRule : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="securityRateMin">
        <span>{{ row.old ? row.old.securityRateMin : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="securityPriceMin">
        <span>{{ row.old ? row.old.securityPriceMin : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="securityRateMax">
        <span>{{ row.old ? row.old.securityRateMax : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="securityPriceMax">
        <span>{{ row.old ? row.old.securityPriceMax : "" }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <div v-if="row.actions.length > 2">
          <a @click="handleClickMore(row.actions[0].name, row)">{{
            row.actions ? row.actions[0].label : ""
          }}</a>
          <Divider type="vertical" />
          <Dropdown @on-click="(name) => handleClickMore(name, row)" transfer>
            <a
              >更多
              <Icon type="ios-arrow-down" />
            </a>
            <DropdownMenu slot="list">
              <DropdownItem
                v-for="(item, i) in row.actions.slice(1)"
                :key="i"
                :name="item.name"
                >{{ item.label }}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <div v-else>
          <a
            v-if="row.actions"
            @click="handleClickMore(row.actions[0].name, row)"
            >{{ row.actions[0].label }}</a
          >
          <Divider
            v-if="row.actions && row.actions.length > 1"
            type="vertical"
          />
          <a
            v-if="row.actions && row.actions.length > 1"
            @click="handleClickMore(row.actions[1].name, row)"
            >{{ row.actions[1].label }}</a
          >
        </div>
      </template>
      <template slot-scope="{ row }" slot="salePriceTypeUpdate">
        <span>{{ formatSalePriceType(row.salePriceTypeUpdate) }}</span>
      </template>
    </Table>
    <!-- 表格内容 end  -->
    <!-- 分页 start  -->
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="totalNum"
        show-total
        show-sizer
        transfer
        :current.sync="nowPage"
        @on-change="getData"
        @on-page-size-change="handleChangePage"
      />
    </div>
    <!-- 分页 end  -->
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import tables from '@/mixins/dynamictable'; // 混入通用代码

import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件
import tableBtns from './tableBtns'; // 表格内部操作按钮
import { SALE_PRICE_TYPE } from '../../constans';

export default {
  mixins: [tables],
  props: {
    dynamicData: {
      type: Object
    },
    pagePath: {
      type: String
    },
    orderState: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ])
  },
  watch: {
    orderState (n, o) {
      this.getData();
    }
  },
  components: {
    qwInput,
    qwSelect,
    qwDatePicker,
    qwSelectTree,
    tableBtns
  },
  data () {
    return {
      actions: [],
      specTableData: [],
      util: util,
      basePath: this.dynamicData.basePath, // 拼接基础路径
      tableDataList: [
        {
          issueState: '2'
        },
        {
          issueState: '0'
        },
        {
          issueState: '1'
        }
      ],
      columns1: [
        {
          title: '组名称',
          slot: 'name',
          align: 'center',
          width: 120
        },
        {
          title: '城市',
          slot: 'name',
          align: 'center',
          width: 120
        },
        {
          title: '参照组',
          slot: 'name',
          align: 'center',
          width: 120
        },
        {
          title: '价格比例',
          slot: 'name',
          align: 'center',
          width: 120
        }
      ]
    };
  },
  created () {},
  methods: {
    ...mapMutations('admin/baseList', ['setTableRowData']),

    formatSalePriceType (typeVal) {
      const typeArr = SALE_PRICE_TYPE.filter((item) => item.value == typeVal);
      if (typeArr.length != 0) {
        return typeArr[0].name;
      }
      return typeVal;
    },
    // 获取表格的数据
    getData () {
      let searchParam = [];
      Object.keys(this.searchFormData).forEach((key) => {
        searchParam.push({ name: key, value: this.searchFormData[key] });
      });
      Object.keys(this.searchFormDataQ).forEach((key) => {
        searchParam.push({ name: key, value: this.searchFormDataQ[key] });
      });
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortName: '',
        sortType: ''
      };
      this.loading = true;
      // 开始请求列表
      ApiRequest(
        this.listData.requestApi.getTableList.url,
        this.listData.requestApi.getTableList.type,
        data
      ).then((res) => {
        let rData = res;
        if (rData.retData !== '') {
          rData.retData = rData.retData;
        }
        let tableDataList = rData.retData.results;
        tableDataList.forEach((item) => {
          let actions = [];
          actions.push(
            {
              name: 'View',
              label: '查看',
              handleType: 'link'
            },
            {
              name: 'Audit',
              label: '审核',
              handleType: 'Popup'
            }
          );

          item.actions = actions;
        });
        // 增加表格操作项
        this.tableDataList = rData.retData.results;
        this.totalNum = rData.retData.totalNum;
        this.loading = false;
      });
    },
    shenhe (row) {
      // 跳转审批界面
      ApiRequest(
        '/sysback/oa/getAuditPageUrl' + `?oaRequestId=` + row.workflowRequestId,
        'post'
      ).then((res) => {
        window.open(res.retData);
      });
    },
    handleClickMore (name, row) {
      if (name === 'Delete') {
        this.$Modal.confirm({
          title: '删除操作',
          content: '确定删除此数据吗？',
          onOk: () => {
            let data = {
              uuid: row.uuid
            };
            // 开始请求商品列表
            ApiRequest(
              this.requestApi.delTableList.url,
              this.requestApi.delTableList.type,
              data
            ).then((res) => {
              this.$Message.success('删除成功');
              this.actionsChange();
            });
          }
        });
      } else {
        let obj = {}; // 动作的对象信息
        row.actions.forEach((item) => {
          if (name === item.name) {
            obj = item;
            return false;
          }
        });
        this.setTableRowData(row);
        if (obj.handleType === 'link') {
          // 操作类型为链接时，拼接参数跳转
          let jumpPath = this.basePath + 'view';
          this.$router.push({
            path: jumpPath,
            query: { recordNo: row.recordNo }
          });
        } else if (obj.handleType === 'prop') {
          // 操作类型为弹窗时 打开弹窗
          if (obj.name === 'viewing') {
            this.showPropviewing = true;
          } else if (obj.name === 'view') {
            this.showPropviewing = true;
          } else {
          }
        } else if (obj.handleType == 'Popup') {
          this.shenhe(row);
          // 操作类型为弹窗时 打开弹窗
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}
</style>
